<template>
    <wd-popup
        v-model="show"
        position="bottom"
        custom-style="border-radius: 10px 10px 0 0;"
    >
        <view class="head-pop">选择地图应用</view>
        <view class="content-pop">
            <view class="item" @click="selectMapApp('腾讯地图')">腾讯地图</view>
            <view class="item" @click="selectMapApp('百度地图')">百度地图</view>
            <view class="item" @click="selectMapApp('高德地图')">高德地图</view>
        </view>
        <!-- #ifdef H5 -->
        <wd-gap height="50px"></wd-gap>
        <!-- #endif -->
    </wd-popup>
</template>

<script setup lang="ts">
const props = defineProps({
    longitude: {
        type: Number,
        default: 1,
    },
    latitude: {
        type: Number,
    },
    addressName: {
        // 新增 addressName 属性
        type: String,
        default: "",
    },
})
const show = defineModel({ type: Boolean, required: false })
// 监听 longitude、latitude 和 addressName 的变化并打印
watch(
    [() => props.longitude, () => props.latitude, () => props.addressName],
    ([newLongitude, newLatitude, newAddressName]) => {
        console.log("接收到的经度:", newLongitude)
        console.log("接收到的纬度:", newLatitude)
        console.log("接收到的地址名称:", newAddressName) // 新增打印地址名称
    },
)
onMounted(() => {
    console.log("初始化时的经度:", props.longitude)
    console.log("初始化时的纬度:", props.latitude)
    console.log("初始化时的地址名称:", props.addressName) // 新增打印地址名称
})
// 选择地图应用
const selectMapApp = (appName) => {
    show.value = false // 关闭弹窗
    handleMapNavigation(
        appName,
        props.longitude,
        props.latitude,
        props.addressName,
    ) // 处理地图导航逻辑
}

// 检查应用是否安装
function isAppInstalled(appId) {
    let l = true
    // #ifdef APP-PLUS
    l = plus.runtime.isApplicationExist({ pname: appId })
    // #endif
    return l
}

// 处理地图导航逻辑
const handleMapNavigation = async (
    appName,
    longitude,
    latitude,
    addressName,
) => {
    //默认导航到安化
    if (!longitude || !latitude) {
        longitude = 111.21283
        latitude = 28.374409
        addressName = "安化县人民政府"
    }
    if (!longitude || !latitude) {
        uni.$uv.toast("未提供有效的经纬度信息")
        return
    }
    switch (appName) {
        case "腾讯地图":
            const isQQMapInstalled = await isAppInstalled("com.tencent.map")
            if (isQQMapInstalled) {
                // 使用腾讯地图的 URL Scheme
                const qqMapScheme = `qqmap://map/marker?marker=coord:${latitude},${longitude};title:${addressName};addr:${addressName}`
                plus.runtime.openURL(qqMapScheme, (err) => {
                    if (err) {
                        // 如果打开失败，使用网页版
                        const webUrl = `https://apis.map.qq.com/uri/v1/marker?marker=coord:${latitude},${longitude};title:${addressName};addr:${addressName}&referer=myapp`
                        plus.runtime.openURL(webUrl)
                    }
                })
            } else {
                uni.$uv.toast("未安装腾讯地图")
            }
            break
        case "百度地图":
            const isBaiduMapInstalled =
                await isAppInstalled("com.baidu.BaiduMap")
            if (isBaiduMapInstalled) {
                // 使用百度地图的 URL Scheme
                const baiduMapScheme = `baidumap://map/marker?location=${latitude},${longitude}&title=${addressName}&content=${addressName}&coord_type=gcj02&src=ios.app.name`
                plus.runtime.openURL(baiduMapScheme, (err) => {
                    if (err) {
                        // 如果打开失败，使用网页版
                        const webUrl = `http://api.map.baidu.com/marker?location=${latitude},${longitude}&title=${addressName}&content=${addressName}&output=html`
                        plus.runtime.openURL(webUrl)
                    }
                })
            } else {
                uni.$uv.toast("未安装百度地图")
            }
            break
        case "高德地图":
            const isGaodeMapInstalled = await isAppInstalled(
                "com.autonavi.minimap",
            )
            if (isGaodeMapInstalled) {
                // 使用高德地图的 URL Scheme
                const gaodeMapScheme = `androidamap://viewMap?sourceApplication=appname&poiname=${addressName}&lat=${latitude}&lon=${longitude}&dev=0`
                plus.runtime.openURL(gaodeMapScheme, (err) => {
                    if (err) {
                        // 如果打开失败，使用网页版
                        const webUrl = `https://uri.amap.com/marker?position=${longitude},${latitude}&name=${addressName}&src=mypage&coordinate=gaode&callnative=0`
                        plus.runtime.openURL(webUrl)
                    }
                })
            } else {
                uni.$uv.toast("未安装高德地图")
            }
            break
        default:
            uni.$uv.toast("未知的地图应用")
    }
}

// 打开地图应用的 URL
const openMapApp = (url) => {
    // #ifdef APP-PLUS
    plus.runtime.openURL(url)
    // #endif
    // #ifdef H5
    window.location.href = url
    // #endif
}
</script>

<style scoped>
.head-pop {
    padding: 32rpx;
    font-size: 36rpx;
    font-weight: bold;
    text-align: center;
    border-bottom: 1px solid #ddd;
}

.content-pop {
    /* padding: 32rpx; */
}

.item {
    padding: 24rpx 0;
    text-align: center;
    border-bottom: 1px solid #ddd;
    font-size: 32rpx;
    color: #333;
}

.item:last-child {
    border-bottom: none;
}
</style>
